<template>
	<view class="content">
		<view class="flex-body">
			<view class="flex-header-column">
				<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="imgterval"
					:duration="duration">
					<swiper-item>
						<view class="flex-header-row">
							<text class="text-one">2022年10月12日</text>
							<text class="text-one">星期二</text>
							<text class="text-one">12:55</text>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="flex-header-row">
							<text class="text-one">农历九月二十</text>
							<text class="text-one">壬寅年[寅虎]</text>
							<text class="text-one">庚戌月 辛丑日</text>
						</view>
					</swiper-item>
				</swiper>
				<view class="flex-header-network">
					<uni-icons :type="paperplname" size="30"></uni-icons>
				</view>
			</view>
			<view class="flex-one">
				<view class="flex-onleft-body">
					<swiper class="flex-beleft-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="intervalues" :duration="duration">
						<swiper-item>
							<view class="flex-onleft-border">
								<text class="flex-onright-title">{{notetitle}}</text>
								<view class="flex-scroll_box">
									<swiper class="message-swiper" circular="true" vertical="true"
										display-multiple-items="5" :autoplay="autoplay" :interval="mesinterval"
										:duration="mesduration">
										<swiper-item v-for="(item,index) in messagelist" :key="index">
											<view class="flex-onright-item">
												<text class="flex-onright-message">{{item}}</text>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="flex-onleft-border">
								<text class="flex-onright-title">{{notetitles}}</text>
								<view class="flex-scroll_box">
									<swiper class="message-swiper" circular="true" vertical="true"
										display-multiple-items="5" :autoplay="autoplay" :interval="mesinterval"
										:duration="mesduration">
										<swiper-item v-for="(item,index) in messagelissest" :key="index">
											<view class="flex-onright-item">
												<view class="flex-onright-row">
													<text class="flex-onright-message">{{item.date}}</text>
													<text class="flex-onright-message">{{item.name}}</text>
												</view>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper-margin-wrap">
						<swiper class="flex-onleft-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="imgterval" :duration="duration">
							<swiper-item v-for="(item, index) in swipers">
								<image class="flex-onleft-image" :src="item"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>

				<view class="flex-onless-body">
					<view class="flex-onright-boby">
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-bottom">
								<text class="flex-onright-text">今日入寺</text>
								<view class="flex-onright-mslight">1210人</view>
							</view>
						</view>
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-bottom">
								<text class="flex-onright-text">今日出寺</text>
								<view class="flex-onright-mslight">800人</view>
							</view>
						</view>
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-bottom">
								<text class="flex-onright-text">当前寺内</text>
								<view class="flex-onright-mslight">800人</view>
							</view>
						</view>
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-nbottom">
								<text class="flex-onright-text">预警等级</text>
								<view class="flex-onright-mslight">四级(安全)</view>
							</view>
						</view>
					</view>

					<view class="flex-onright-body">
						<swiper class="flex-onright-swiper" circular :indicator-dots="indicatorDots"
							display-multiple-items="5" :autoplay="autoplay" :interval="mesinterves"
							:duration="mesdurates" vertical="true">
							<swiper-item v-for="(item, index) in iotarray">
								<view class="flex-onright-cloum">
									<view class="flex-onright-border-bottom">
										<text class="flex-onright-text">{{item.title}}</text>
										<view class="flex-onright-mslight">{{item.count}}<text
												class="font-size28">{{item.unit}}</text>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import airport from '@/common/airport.js'
	export default {
		data() {
			return {
				title: 'Hello',
				indicatorDots: false,
				autoplay: true,
				mesinterval: 2000,
				interval: 30000,
				imgterval: 20000,
				intervalues: 60000,
				mesinterves: 4000,
				mesduration: 6000,
				mesdurates: 30000,
				duration: 2000,
				iotarray: [{
					title: '温  度',
					count: '32',
					unit: '℃'
				}, {
					title: '湿  度',
					count: '80',
					unit: '%RH'
				}, {
					title: '悬浮颗粒物',
					count: '10',
					unit: 'W/m'
				}, {
					title: 'PM2.5',
					count: '10',
					unit: 'ug/m³'
				}, {
					title: 'PM10',
					count: '19',
					unit: 'ug/m³'
				}, {
					title: '噪  音',
					count: '20',
					unit: '分贝'
				}, {
					title: '风  向',
					count: '230°',
					unit: ''
				}, {
					title: '风  速',
					count: '1.2',
					unit: ''
				}, {
					title: '大气压',
					count: '1002',
					unit: 'hPa'
				}],
				swipers: [
					'http://portal.xumengte.com/taro-vue/active/maskgroups.jpg',
					'http://portal.xumengte.com/taro-vue/active/maskgroups1.jpg',
					'http://portal.xumengte.com/taro-vue/active/maskgroups2.jpg',
				],
				notetitle: '公告',
				notetitles: '活动',
				notemessage: '',
				messagelist: [
					'\u3000\u3000科技园欢迎您！请排队购票，保持',
					'一米距离，入园请戴好口罩，打开健康',
					'码、行程码、入园请扫场所码，配合测',
					'量体温，谢谢配合。科技园欢迎您！请',
					'排队购票，保持一米距离，入园请戴好',
					'口罩，打开健康码、行程码、入园请扫',
					'场所码，配合测量体温，谢谢配合。',
					'\u3000\u3000科技园欢迎您！请排队购票，保持',
					'一米距离，入园请戴好口罩，打开健康',
					'码、行程码、入园请扫场所码，配合测',
					'量体温，谢谢配合。科技园欢迎您！请',
					'排队购票，保持一米距离，入园请戴好',
					'口罩，打开健康码、行程码、入园请扫',
					'场所码，配合测量体温，谢谢配合。'
				],
				messagelissest: [{
					date: '除夕至正月初一',
					name: '新春吉祥平安法会'
				}, {
					date: '正月初九',
					name: '新春祈福供天法会'
				}, {
					date: '四月初二/三/四',
					name: '文殊开智法会'
				}, {
					date: '六月十九',
					name: '观音法会'
				}, {
					date: '八月十五',
					name: '中秋法会'
				}, {
					date: '九月十九',
					name: '观音法会'
				}, {
					date: '腊月初一至初七',
					name: '弥陀佛七'
				}, {
					date: '除夕至正月初一',
					name: '新春吉祥平安法会'
				}],
			}
		},
		onLoad() {
			this.notetitle = airport.notetitle
			this.notemessage = airport.notemessage
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.flex-body {
		width: 100vw;
		height: 100vh;
		background-color: #DAE4EE;
		display: flex;
		flex-direction: column;
	}

	.flex-header-column {
		margin-bottom: 1vw;
		width: 100%;
		height: 5vw;
		display: flex;
		background-color: rgba(255, 255, 255, 0.8);
		flex-direction: column;
	}

	.flex-header-network {
		position: absolute;
		margin: 8px;
		right: 8px;
	}

	.flex-header-row {
		display: flex;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		height: 5vw;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text-one {
		color: #053E65;
		font-size: 2vw;
	}

	.flex-one {
		display: flex;
		width: 98vw;
		height: 98vh;
		margin-left: 1vw;
		margin-right: 1vw;
	}

	.flex-two {
		display: flex;
		width: 96vw;
		height: 96vh;
		margin: 1vw 1vw;
	}

	.flex-onleft-body {
		display: flex;
		flex-direction: column;
		width: 72vw;
		height: 96vh;
	}

	.flex-beleft-swiper {
		width: 70vw;
		padding-top: 2px;
		padding-left: 2px;
		padding-right: 2px;
		height: 29vh;
	}

	.flex-onless-body {
		display: flex;
		flex-direction: column;
		width: 28vw;
		height: 96vh;
	}

	.swiper-margin-wrap {
		width: 70vw;
		height: 66vh;
	}

	.flex-onleft-swiper {
		width: 70vw;
		height: 66vh;
	}

	.flex-onright-swiper {
		width: 28vw;
		height: 54vh;
		-webkit-mask-image: linear-gradient(transparent, white 2vw, white calc(100% - 2vw), transparent);
	}

	.swiper-margin-item {
		width: 70vw;
		height: 62vh;
	}

	.flex-onleft-image {
		width: 68vw;
		border-radius: 24px;
		height: 66vh;
		margin: 2px 12px;
	}

	.flex-onright-boby {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 43vh;
		margin: 1vw 4px;
		border-width: 1px;
		border-style: solid;
		border-radius: 24px;
		border-color: #CDD3D4;
		background-color: #E9F2F5;
	}

	.flex-onright-body {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 50vh;
		margin: 1vw 4px;
		border-width: 1px;
		border-style: solid;
		border-radius: 24px;
		border-color: #CDD3D4;
		background-color: #E9F2F5;
	}

	.flex-onright-bloum {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 11vh;
		align-items: center;
	}

	.flex-onright-cloum {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 10vh;
		align-items: center;
	}

	.flex-onright-border-bottom {
		display: flex;
		flex-direction: column;
		width: 20vw;
		height: 11vh;
		align-items: center;
		justify-content: center;
		border-bottom: 2px solid #778FA555;
	}

	.flex-onright-border-nbottom {
		display: flex;
		flex-direction: column;
		width: 20vw;
		height: 11vh;
		align-items: center;
		justify-content: center;
	}

	.flex-onright-title {
		font-family: FZQKBYSJW;
		color: #05436D;
		font-weight: bold;
		letter-spacing: 8px;
		font-size: 4vw;
		margin: 16px;
	}

	.flex-onright-item {
		width: 64vw;
		height: 32px;
	}

	.flex-onright-message {
		color: #05436D;
		flex: 1;
		letter-spacing: 4px;
		font-size: 3vw;
		line-height: 3vw;
		font-family: MiSans-Regular;
	}

	.flex-onright-row {
		display: flex;
	}

	.flex-onright-name {
		color: #05436D;
		letter-spacing: 4px;
		font-size: 36px;
		line-height: 36px;
		font-family: MiSans-Regular;
	}

	.text-indent2 {
		padding: 8px;
		margin: 16px;
		text-indent: 2em;
	}

	.flex-scroll_box {
		width: 64vw;
		height: 24vh;
		padding: 2px 1vw;
		margin: 0.5vw 1vw;
	}

	.message-swiper {
		width: 64vw;
		height: 22vh;
		-webkit-mask-image: linear-gradient(transparent, white 2vw, white calc(100% - 2vw), transparent);
	}

	.flex-onright-text {
		font-family: FZQKBYSJW;
		color: #05436D;
		letter-spacing: 2px;
		font-size: 3vw;
		margin: 2px;
	}

	.flex-onright-mslight {
		font-family: MiSans-Light;
		color: #05436D;
		letter-spacing: 2px;
		font-size: 3vw;
		margin: 2px;
	}

	.font-size28 {
		font-size: 2vw;
	}

	.color-red {
		color: red;
	}

	.flex-onleft-border {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 68vw;
		height: 27vh;
		margin: 0.8vw 0.8vw;
		border-width: 1px;
		border-style: solid;
		align-items: center;
		border-radius: 24px;
		border-color: #CDD3D4;
		background-color: #E9F2F5;
	}

	.flex-onrighs {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 33vh;
	}

	.flex-onrighsbor {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 26vw;
		height: 22vw;
		margin: 4px;
		border-width: 1px;
		border-style: solid;
		border-radius: 12px;
		border-color: rgba(137, 131, 142, 1);
		background-color: rgba(32, 50, 50, 1);
	}
</style>
